{% extends "base.html" %}  <!-- 继承公共模板 -->

{% block title %}SimpleTrade - 首页{% endblock %}  <!-- 重写标题 -->

{% block extra_css %}
    <style>
        /* 首页表格特有样式 */
        .home-table {
            width: 100%;
            border-collapse: separate;  /* 改用separate实现间距效果 */
            border-spacing: 0;
            margin: 20px 0;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        .home-table th {
            background: #3498db;
            color: white;
            font-weight: 600;
            padding: 14px 15px;
            text-align: left;
            position: relative;
        }

        .home-table td {
            padding: 14px 15px;
            border-bottom: 1px solid #f0f2f5;
            transition: background 0.2s ease;
        }

        .home-table tr:last-child td {
            border-bottom: none;  /* 移除最后一行的下边框 */
        }

        .home-table tr:hover td {
            background: #f8fafc;  /* hover时的背景色 */
        }

        /* 列宽优化 */
        .home-table th:nth-child(1),
        .home-table td:nth-child(1) {
            width: 15%;  /* 基金代码列 */
        }
        .home-table th:nth-child(2),
        .home-table td:nth-child(2) {
            width: 35%;  /* 基金名称列（较宽） */
        }
        .home-table th:nth-child(3),
        .home-table td:nth-child(3) {
            width: 25%;  /* 策略类型列 */
        }
        .home-table th:nth-child(4),
        .home-table td:nth-child(4) {
            width: 25%;  /* 年化收益率列 */
        }

        /* 收益率数值高亮 */
        .annual-return-high {
            color: #e74c3c;  /* 高收益率（如>10%）用红色突出 */
            font-weight: 600;
        }

        .view-all {
            margin-top: 15px;
            font-size: 0.95em;
            text-align: right;  /* 靠右显示，与表格对齐 */
        }

        .view-all a {
            color: #3498db;
            text-decoration: none;
            padding: 4px 8px;
            border-radius: 4px;
            transition: background 0.2s;
        }

        .view-all a:hover {
            text-decoration: underline;
            background: #f0f7ff;  /* 悬停时的浅色背景 */
        }

        .status-bar {
            color: #666;
            font-size: 0.9em;
            margin-top: 30px;
            text-align: right;
            padding: 10px 0;
            border-top: 1px solid #eee;
        }
    </style>
{% endblock %}

{% block content %}  <!-- 填充页面特有内容 -->
    <h2 class="section-title">最新建议买入的基金</h2>

    {% if latest_results %}
        <table class="home-table">
            <tr>
                <th>基金代码</th>
                <th>基金名称</th>
                <th>策略类型</th>
                <th>年化收益率(%)</th>
            </tr>
            {% for item in latest_results %}
            <tr>
                <td>{{ item.fund_code }}</td>
                <td>{{ item.fund_name }}</td>
                <td>{{ item.strategy }}</td>
                <!-- 根据收益率数值添加不同样式 -->
                <td class="buy-yes {{ 'annual-return-high' if item.annual_return|float > 10 else '' }}">
                    {{ item.annual_return }}
                </td>
            </tr>
            {% endfor %}
        </table>
        <div class="view-all">
            <a href="/evaluation">查看全部评估结果 →</a>
        </div>
    {% else %}
        <div class="empty-state">
            暂无建议买入的基金，或评估结果尚未生成<br>
            系统在每个工作日6:00会自动更新数据并执行评估
        </div>
    {% endif %}
    <!-- 底部状态信息（所有页面共用） -->
    <div class="status-bar">
        最后评估时间: {{ eval_date }} | 已配置基金: {{ fund_count }} 只
    </div>
{% endblock %}